<template>
  <i
    class="iconfont"
    :class="this.getIcon()"
    :style="this.getIconSize()"
    @click="this.onClick"
  ></i>
</template>

<script>
export default {
  name: 'mp-icon',
  props: {
    type: {
      type: String,
      required: true
    },
    size: {
      type: Number,
      default: 16
    }
  },
  methods: {
    getIcon() {
      return 'icon-' + this.type
    },
    getIconSize() {
      return { fontSize: this.size + 'px' }
    },
    onClick(e) {
      this.$emit('click', e)
    }
  }
}
</script>

<style lang="scss" scoped>
.iconfont {
  display: inline-block;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  line-height: 1;
  vertical-align: baseline;
  text-transform: none;
  speak: none;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>